<template>
  <div
    class="flow-node h-full w-full bg-blue-200 px-15px py-10px shadow shadow-blue"
  >
    <span>{{ props.data.label }}</span>
    <Handle v-for="item in handles" :key="item.id" v-bind="item" />
  </div>
</template>
<script setup lang="ts">
import { NodeProps, HandleProps, HandleType, Position } from "@vue-flow/core";
// 自定义hand
import Handle from "../handle/index.vue";
import { CSSProperties, onMounted, ref } from "vue";
import { v4 as uuidv4 } from "uuid";
import { Handle as FlowHandle } from "../types/index";

const emits = defineEmits(["updateNodeInternals"]);
const props = defineProps<NodeProps>();
const handles = ref<FlowHandle[]>([]);

onMounted(() => {
  addHandle("source");
  addHandle("target");
  // 定时添加handle
  setTimeout(() => {
    addHandle("source", { top: "auto", bottom: "5px" });
  }, 1000);
});

function addHandle(type: HandleType = "source", style?: CSSProperties) {
  handles.value.push({
    id: uuidv4(),
    type,
    connectable: true,
    position: type == "source" ? Position.Right : Position.Left,
    style,
  });
  // emits("updateNodeInternals");
}
</script>
